<template>
    <div class="goodsinfo">
                <!-- 小球 -->
        <transition @before-enter="beforeEnter"
                    @enter="enter"
                    @after-enter="afterEnter">
            <div class="ball" v-show="isBall" ref="ball"></div>
        </transition>

        <!-- 轮播图 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <!-- 轮播图组件 -->
                <rotation :LunboList="LunboList" :isFull="false"></rotation>
            </div>
        </div>

        <!-- 售卖信息 -->
        <div class="mui-card">
			<div class="mui-card-header">
                <h4>{{goodsinfo.title}}</h4>
            </div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="price">市场价： <del>{{goodsinfo.market_price}}</del>  销售价： <span class="new_price">{{goodsinfo.sell_price}}</span> </p>
                    <!-- 传递库存量 -->
                    <p>购买数量： <numbox :max="goodsinfo.stock_quantity" @numberVal="getnumber"></numbox></p>
                    <button class="mui-btn mui-btn-primary">立即购买</button>
                    <button class="mui-btn mui-btn-danger" @click="addToCar">加入购物车</button>
				</div>
			</div>
		</div>

        <!-- 商品参数 -->
        <div class="mui-card">
			<div class="mui-card-header">
                <h4>商品参数</h4>
            </div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
                    <p>商品货号:{{goodsinfo.goods_no}}</p>
                    <p>库存情况:{{goodsinfo.stock_quantity}}</p>
                    <p>上架时间:{{goodsinfo.add_time | dateFormat}}</p>
				</div>
			</div>
			<div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="getdesc(id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="getdescmts(id)">  商品评论</mt-button>
            </div>
		</div>
    </div>
    
</template>

<script>
import { Toast } from 'mint-ui'
import rotation from '../subcomponent/rotation.vue'
import numbox from '../subcomponent/goods_numbox.vue'
export default {
    data(){
        return {
            id: this.$route.params.goodsid,
            // 轮播图
            LunboList:[],
            //商品参数
            goodsinfo:[],
            //小球
            isBall: false,
            // number框数值
            numbox: 1
        }
    },
    methods:{
        // 获取轮播图
        getthumimageset(){
            this.$http.get('api/getthumimages/'+this.id).then(result=>{
                if(result.body.status === 0){
                    // 轮播图组件中图片的src为img
                    result.body.message.forEach(item=>{
                        item.img = item.src
                    })
                    this.LunboList = result.body.message
                } else {
                    Toast('获取图片列表失败')
                }
            })
        },
        // 获取商品参数
        getinfo(){
            this.$http.get('api/goods/getinfo/'+this.id).then(result=>{
                if(result.body.status === 0){
                    this.goodsinfo = result.body.message[0]
                } else {
                    Toast('获取商品参数失败')
                }
            })
        },
        // 跳转到图文介绍
        getdesc(id){
            this.$router.push({ name: 'goodsdesc', params: { descid:id }})
        },
        // 跳转到图片评论
        getdescmts(id){
            this.$router.push({ name: 'goodscmts', params: { cmtsid:id }})
        },



        // 小球动画
        beforeEnter(el){
            el.style.transform = 'translate(0,0)'
        },
        enter(el,done){
    // 优化:
        // 1.计算小球初始位置
            const ballPosition = this.$refs.ball.getBoundingClientRect()
            // console.log(ballPosition)
            //DOMRect {bottom: 279,height: 15,left: 150,right: 165,top: 264,width: 15,x: 150,y: 264}
        //2. 获取徽标在页面中的位置
            const badgePosition = document.getElementById('badge').getBoundingClientRect()
        //3.计算距离
            var movex = badgePosition.left - ballPosition.left
            var movey = badgePosition.top - ballPosition.top


            el.offsetWidth
            el.style.transition = 'all 1s cubic-bezier(.4,-0.3,1,.68)'
            el.style.transform = `translate(${movex}px,${movey}px)`
            done()
        },
        afterEnter(el){
            this.isBall = !this.isBall
        },
        // 获取numberbox里的数值
        getnumber(data){
            this.numbox = data
            // console.log('子组件传递过来的值为'+this.numbox)
        },

        // 加入购物车
        addToCar(){
            this.isBall = !this.isBall
            // 将商品信息加入到购物车中
            var goodsinfo = {
                id: this.id,
                count: this.numbox,
                price: this.goodsinfo.sell_price,
                selected: false 
            }

            // 调用store-->mutations-->addInfoToCar
            this.$store.commit('addInfoToCar',goodsinfo)
        }


    },
    created(){
        // 获取轮播图
        this.getthumimageset(),
        // 获取商品参数
        this.getinfo()
    },
    components:{
        rotation,
        numbox
    }
}

</script>

<style lang="less" scoped>
.goodsinfo{
    .mui-card-content{
        position: relative;
        .price{
            .new_price{
                color: red;
            }
        }
    }


    // 图文介绍/商品评论
    .mui-card-footer{
        display: block;
        button {
            margin: 10px 0;
        }
    }

    .ball{
        position: absolute;
        top: 365px;
        left: 151px;
        width: 15px;
        height: 15px;
        background-color: red;
        border-radius: 50%;
        z-index: 999;
    }
}


    
</style>